﻿@model AddressControllerModel.Index
<div class="my-main">
    <div class="ui-box  ui-box-alpha">
        <div class="ui-box-head">
            <div class="ui-box-head-border">
                <div class="ui-box-head-title">
                    收货地址</div>
                <span class="ui-box-head-text"></span><a href="#" class="ui-box-head-more"></a>
            </div>
        </div>
        <div class="ui-box-container">
            <div class="ui-box-content">
                <div class="ui-tiptext-container ui-tiptext-container-message">
                    <p class="ui-tiptext ui-tiptext-message">
                        <i class="ui-tiptext-icon iconfont" title="提示"></i> <span>最多添加 5 个收货地址，您还可以添加
                            @(5 - Model.Addresses.Count)
                            个收货地址。</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="ui-box-container-noborder">
            <div class="address-list">
                @Model.Addresses.Each(@<div id="address-@item.Item.Id" class="address-list-item @(item.Index == 4 ? "address-list-item-last" : string.Empty) @(item.Item.IsDefault ? "address-list-item-default" : string.Empty)" >
                    <div class="row-fluid">
                        <div class="span8">
                            <div class="address-list-item-content">
                                <p>
                                    <strong title="@(item.Item.Receiver)">@(item.Item.Receiver)</strong> <span>(@(item.Item.Mobile)
                                        @(item.Item.Phone))</span>
                                </p>
                                <p>@Model.GetLocationName(item.Item.AreaCode) @item.Item.Address (@item.Item.PostalCode)</p>
                            </div>
                        </div>
                        <div class="span2 address-list-item-actions">
                            @if (item.Item.IsDefault)
                            {
                                <span>默认地址</span>
                            }
                            else
                            {
                                <a id="address-@(item.Item.Id)-setdefault" class="hide" onclick="setDefaultAddress(@item.Item.Id)" href="javascript:void(0);" title="设为默认">
                                    设为默认</a>
                            }
                        </div>
                        <div class="span2 address-list-item-actions">
                            <a title="修改" href="javascript:void(0);" onclick="editAddress(@item.Item.Id)"><i
                                class="icon-pencil"></i>修 改</a> <a title="删除" href="javascript:void(0);" onclick="removeAddress(@item.Item.Id)">
                                    <i class="icon-remove "></i>删 除</a>
                        </div>
                    </div>
                </div>)
                @if (Model.Addresses.Count < 5)
                {
                    <div class="address-list-item-extra">
                        <a class="button button-follow" title="添加收货地址" href="javascript:void(0);" onclick="addAddress(0);">
                            <span class="button-left">&nbsp;</span> <span class="button-text">添加收货地址</span><span
                                class="button-right">&nbsp;</span></a>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
@section js{
    <script type="text/javascript">
        var addresses = @(Html.Raw(Model.JsonData));
        function editAddress(id) {
            if (id > 0) {
                var address = $.Enumerable.From(addresses).Where(function(o) { return o.Id == id; }).FirstOrDefault();
                var html = $('#address-form-tmpl').tmpl(address);
                
                $('.address-form').remove();
                $("#address-" + id).hide(); 
                $('.address-list-item').not("#address-" + id).show();
                $("#address-" + id).after(html);
                if (addresses.length < 5) {
                    $('.address-list-item-extra').show();
                }
                $("#form-address").submit();
            }
        }
        function addAddress() {
            var html = $('#address-form-tmpl').tmpl([{ Id: 0, Receiver: '',Address:'',PostalCode:'',Phone:'',Mobile:'',IsDefault:false}]);
            $('.address-form').remove();
            $('.address-list-item').show();
            $(".address-list-item-extra").hide().after(html);
            $("#form-address").submit();
        }
        function removeAddress(id) {
            $.postJSON('/address/delete', { param: id }, function(result) {
                 if (result.Status == true) {
                                window.location.reload();
                            }else {
                     alert(result.Message);
                 }
            });
        }
        function setDefaultAddress(id) {
             $.postJSON('/address/setdefault', { param: id }, function(result) {
                 if (result.Status == true) {
                                window.location.reload();
                            }else {
                     alert(result.Message);
                 }
            });
        }
        function cancleAddress(id) {
            if(id>0) {
                $('.address-form').remove();
                $('#address-' + id).show();
            } else {
                $(".address-form").remove();
                $('.address-list-item-extra').show();
            }
        }
        function submitAddress(form) {
            $(form).validate({
                rules: {
                    Receiver: { required: true },
                    Address: { required: true },
                    PostalCode: { required: true, postcode: true }
                },
                messages: { Receiver: { required: '请填写真实有效的姓名！' }, Address: { required: '请填写真实有效的街道地址信息！' }, PostalCode: { required: '请填写邮政编码！', postcode: '请填写正确的邮政编码！' } },
                submitHandler: function(f) {
                    var isMobile = (document.getElementById('Mobile').value.isMobile());
                    var isPhone = (document.getElementById('Phone').value.isPhone());
                    if (isMobile || isPhone) {
                        var param = $(f).serialize();
                        $.postJSON(form.action, param, function(result) {
                            if (result.Status == true) {
                                window.location.reload();
                            }
                        });
                    } else {
                        var error = $("<span class='error'>移动电话、固定电话必填一项！</span>");
                        error.insertAfter("#Phone");
                    }
                }
            });
            return false;
        }

        $(function() {
            $('.address-list-item').hover(function(e) {
                if(!$(this).hasClass('address-list-item-default')) {
                    var id = e.target.id;
                    var targetId = id + "-setdefault";
                    $('#' + targetId).show();
                }
            }, function(e) {
             if(!$(this).hasClass('address-list-item-default')) {
                    var id = e.target.id;
                    var targetId = id + "-setdefault";
                    $('#' + targetId).hide();
                }
            });
        });
    </script>
    <script id="address-form-tmpl" type="text/x-jquery-tmpl">     
        <div class="address-form">
            <form id="form-address" class="form-horizontal mb-0" action="/address/address/${Id}" onsubmit="return submitAddress(this);">
               <div class="form-content"> <div class="control-group">
                    <label class="control-label" for="Receiver">
                        收货人：</label>
                    <div class="controls">
                        <div>
                            <input type="text" id="Receiver" name="Receiver" placeholder="收货人姓名" value="${Receiver}">    </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="AreaCode">
                        所在地区：</label>
                    <div class="controls">
                            <input type="text" id="AreaCode" name="AreaCode" placeholder="AreaCode" value="${AreaCode}">   
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="Address">
                        街道地址：</label>
                    <div class="controls">
                        <div>
                            <input type="text" id="Address" name="Address" placeholder="详细地址" value="${Address}">
                        </div>
                        <p class="help-block mt-5">不需要重复填写省/市/区</p>                    

                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="PostalCode">
                        邮政编码：</label>
                    <div class="controls">
                        <input type="text" id="PostalCode" name="PostalCode" maxlength="6" placeholder="邮政编码" value="${PostalCode}">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">
                        联系方式：</label>
                    <div class="controls">
                        <div class="controls-sub clearfix">
                            <div class="mobile">
                                <label  for="Mobile">移动电话</label>
                                <input type="text" id="Mobile" name="Mobile" class="input-small" maxlength="11" placeholder="移动电话" value="${Mobile}">
                            </div>
                            <div class="contact-separator">或</div>
                            <div class="pull-left w-400"><label  for="Phone">固定电话</label><input type="text" id="Phone" class="input-medium" name="Phone" placeholder="固定电话" value="${Phone}">
                            </div>
                          
                        </div>  <p class="help-block  mt-5">移动电话、固定电话必填一项</p>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox inline">
                            {{if IsDefault==true}}
                            <input type="checkbox" value="${IsDefault}" checked="checked" name="IsDefault" onclick="if(this.checked){this.value='true';}else{this.value='false';this.removeAttribute('checked');};" />
                            {{else}}   
                            <input type="checkbox" value="${IsDefault}" name="IsDefault" onclick="if(this.checked){this.value='true';}else{this.value='false';this.removeAttribute('checked');};" />
                            {{/if}}
                            <span>设置为默认收货地址</span>
                            </label>
                        </div>
                </div></div>
                <div class="form-actions">
                    {{if Id>0}}
                    <button class="ui-btn ui-btn-alpha" type="submit">
                    确认修改</button>
                                         
                    <button type="button" class="ui-btn ui-btn-beta" onclick="cancleAddress(${Id});">取消修改</button>
                    {{else}}
                    
                    <button class="ui-btn ui-btn-alpha" type="submit">
                    保 存</button>
    <button type="button" class="ui-btn ui-btn-beta" onclick="cancleAddress(0);">取 消</button>
    {{/if}}
    </div>
</form>
        </div>
    </script>
}
